<template>
  <div>
    <el-form
      :model="inputForm"
      size="small"
      ref="inputForm"
      v-loading="loading"
      :class="method === 'view' ? 'readonly' : ''"
      :disabled="method === 'view'"
      label-width="120px"
    >
      <el-row :gutter="15">
        <div class="line-bottom">活动配置</div>
        <el-col :span="24">
          <el-form-item
            label="活动名称:"
            prop="activeName"
            :rules="[
              {
                required: true,
                message: '活动名称不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              v-model="inputForm.activeName"
              placeholder="请填写活动名称"
            ></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="24">
          <el-form-item
            label="活动类型:"
            prop="activeType"
            :rules="[
              {
                required: true,
                message: '活动类型不能为空',
                trigger: 'blur',
              },
            ]"
          >
            <el-select
              class="width-100"
              size="small"
              v-model="inputForm.activeType"
              placeholder="请选择活动类型"
              :disabled="method == 'edit' ? true : false"
            >
              <el-option
                v-for="item in activeTypeList"
                :key="item.dictKey"
                :label="item.dictValue"
                :value="item.dictKey"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <div v-if="inputForm.activeType == 1">
          <div class="line-bottom">参与对象</div>
          <el-col :span="24">
            <el-form-item
              label="参与对象:"
              prop="userType"
              :rules="[
                {
                  required: true,
                  message: '参与对象不能为空',
                  trigger: 'blur',
                },
              ]"
            >
              <el-select
                class="width-100"
                size="small"
                v-model="inputForm.userType"
                placeholder="请选择参与对象"
                :disabled="method == 'edit' ? true : false"
              >
                <el-option
                  v-for="item in userTypeList"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col
            :span="24"
            v-if="inputForm.userType == 1 || inputForm.userType == 2"
          >
            <div class="p-l-20" style="display: flex">
              <el-form-item
                label="奖励内容:"
                prop="awardType"
                :rules="[
                  {
                    required: true,
                    message: '奖励内容不能为空',
                    trigger: 'blur',
                  },
                ]"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.awardType"
                  placeholder="请选择奖励内容"
                >
                  <el-option
                    v-for="item in awardTypeList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="奖励金额:"
                label-width="120px"
                prop="award"
                :rules="{
                  required: true,
                  message: '奖励金额不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  v-model="inputForm.award"
                  placeholder="请填写奖励金额"
                ></el-input>
              </el-form-item>
              <!-- <div style="margin-top: 4px; margin-left: 10px">
              <el-button
                type="text"
                size="mini"
                v-if="inputForm.merchantJson.length - 1 === mjIndex"
                @click="mjAdd(mjItem)"
                >增加</el-button
              >
              <el-button
                type="text"
                size="mini"
                style="color: #f56c6c"
                v-if="inputForm.merchantJson.length > 1"
                @click="mjDel(mjItem, mjIndex)"
                >删除</el-button
              >
            </div> -->
            </div>
          </el-col>
        </div>
        <div v-if="inputForm.userType == 3 && inputForm.activeType == 1">
          <div class="line-bottom">押金返还</div>
          <el-col :span="24">
            <el-form-item
              label="考核内容:"
              prop="assessContent"
              :rules="{
                required: true,
                message: '考核内容不能为空',
                trigger: 'blur',
              }"
            >
              <el-select
                class="width-100"
                size="small"
                v-model="inputForm.assessContent"
                placeholder="请选择考核内容"
              >
                <el-option
                  v-for="item in assessContentList"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24" v-if="inputForm.assessContent == 1">
            <div class="p-l-20" style="display: flex">
              <el-form-item
                label="考核类型:"
                prop="assessType"
                :rules="{
                  required: true,
                  message: '考核类型不能为空',
                  trigger: 'blur',
                }"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.assessType"
                  placeholder="请选择考核类型"
                >
                  <el-option
                    v-for="item in assessTypeList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="支付方式:"
                prop="payWay"
                :rules="{
                  required: true,
                  message: '支付方式不能为空',
                  trigger: 'blur',
                }"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.payWay"
                  placeholder="请选择支付方式"
                  multiple
                >
                  <el-option
                    v-for="item in payTypeList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="返还比例:"
                label-width="120px"
                prop="assessReturnRatio"
                :rules="{
                  required: true,
                  message: '返还比例不能为空',
                  trigger: 'blur',
                }"
              >
                <div style="display: flex">
                  <el-input
                    v-model="inputForm.assessReturnRatio"
                    placeholder="请填写返还比例"
                  ></el-input>
                  <span style="margin-left: 3px">%</span>
                </div>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="24" v-if="inputForm.assessContent == 2">
            <div class="p-l-20" style="display: flex">
              <el-form-item
                label="考核类型:"
                prop="assessType"
                :rules="{
                  required: true,
                  message: '考核类型不能为空',
                  trigger: 'blur',
                }"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.assessType"
                  placeholder="请选择考核类型"
                >
                  <el-option
                    v-for="item in assessTypeList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="考核方式:"
                prop="assessMode"
                :rules="{
                  required: true,
                  message: '考核方式不能为空',
                  trigger: 'blur',
                }"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.assessMode"
                  placeholder="请选择考核方式"
                >
                  <el-option
                    v-for="item in assessModeList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="支付方式:"
                prop="payWay"
                :rules="{
                  required: true,
                  message: '支付方式不能为空',
                  trigger: 'blur',
                }"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.payWay"
                  placeholder="请选择支付方式"
                  multiple
                >
                  <el-option
                    v-for="item in payTypeList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="24" v-if="inputForm.assessContent == 2">
            <div class="p-l-20" style="display: flex">
              <el-form-item
                label="时间考核:"
                prop="assessPeriodType"
                :rules="{
                  required: true,
                  message: '时间考核不能为空',
                  trigger: 'blur',
                }"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.assessPeriodType"
                  placeholder="请选择时间考核"
                >
                  <el-option
                    v-for="item in assessPeriodTypeList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="考核周期:"
                prop="assessPeriod"
                :rules="{
                  required: true,
                  message: '考核周期不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  v-model="inputForm.assessPeriod"
                  placeholder="请填写活动名称"
                ></el-input>
              </el-form-item>
              <el-form-item
                label="考核金额:"
                label-width="120px"
                prop="assessAward"
                :rules="{
                  required: true,
                  message: '考核金额不能为空',
                  trigger: 'blur',
                }"
              >
                <el-input
                  v-model="inputForm.assessAward"
                  placeholder="请填写考核金额"
                ></el-input>
              </el-form-item>
              <!-- <div style="margin-top: 4px; margin-left: 10px">
              <el-button
                type="text"
                size="mini"
                v-if="inputForm.merchantJson.length - 1 === mjIndex"
                @click="mjAdd(mjItem)"
                >增加</el-button
              >
              <el-button
                type="text"
                size="mini"
                style="color: #f56c6c"
                v-if="inputForm.merchantJson.length > 1"
                @click="mjDel(mjItem, mjIndex)"
                >删除</el-button
              >
            </div> -->
            </div>
          </el-col>
        </div>
        <div v-if="inputForm.activeType == 2">
          <div class="line-bottom">考核内容</div>
          <el-col :span="24">
            <el-form-item
              label="考核对象:"
              prop="checkUserType"
              :rules="{
                required: true,
                message: '考核对象不能为空',
                trigger: 'blur',
              }"
            >
              <el-select
                class="width-100"
                size="small"
                v-model="inputForm.checkUserType"
                placeholder="请选择考核对象"
              >
                <el-option
                  v-for="item in checkUserTypeList"
                  :key="item.dictKey"
                  :label="item.dictValue"
                  :value="item.dictKey"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <div class="p-l-20" style="display: flex">
              <el-form-item
                label="考核内容:"
                prop="checkContent"
                :rules="{
                  required: true,
                  message: '考核内容不能为空',
                  trigger: 'blur',
                }"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.checkContent"
                  placeholder="请选择考核内容"
                >
                  <el-option
                    v-for="item in checkContentList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="考核类型:"
                prop="checkType"
                :rules="{
                  required: true,
                  message: '考核类型不能为空',
                  trigger: 'blur',
                }"
              >
                <el-select
                  class="width-100"
                  size="small"
                  v-model="inputForm.checkType"
                  placeholder="请选择考核类型"
                >
                  <el-option
                    v-for="item in checkTypeList"
                    :key="item.dictKey"
                    :label="item.dictValue"
                    :value="item.dictKey"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item
                label="上浮比例:"
                label-width="120px"
                prop="checkAscRatio"
                :rules="{
                  required: true,
                  message: '上浮比例不能为空',
                  trigger: 'blur',
                }"
              >
                <div style="display: flex">
                  <el-input
                    v-model="inputForm.checkAscRatio"
                    placeholder="请填写上浮比例"
                  ></el-input>
                  <span style="margin-left: 3px">%</span>
                </div>
              </el-form-item>
            </div>
          </el-col>
        </div>
      </el-row>
    </el-form>
  </div>
</template>

<script>
import { getDictionary } from "@/api/system/dict";
export default {
  props: {
    inputForm: {
      type: Object,
      default: () => {
        return {
          id: "",
          activeCode: "",
          activeName: "",
          activeType: "",
          assessAward: "",
          assessContent: "",
          assessMode: "",
          assessPeriod: "",
          assessPeriodType: "1",
          assessReturnRatio: "",
          assessType: "",
          award: "0",
          awardType: "0",
          checkAscRatio: "",
          checkUserType: "2",
          checkContent: "1",
          checkType: "1",
          payWay: "",
          userType: null,
        };
      },
    },
    method: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      loading: false,
      activeTypeList: [],
      userTypeList: [],
      awardTypeList: [],
      assessContentList: [],
      assessTypeList: [],
      assessModeList: [],
      payTypeList: [],
      assessPeriodTypeList: [],
      checkUserTypeList: [],
      checkContentList: [],
      checkTypeList: [],
    };
  },
  created() {
    this.doGetDicts();
  },
  methods: {
    /* 字典 */
    doGetDicts() {
      getDictionary({ code: "pledge_active_type" }).then((res) => {
        this.activeTypeList = res.data.data;
      });
      getDictionary({ code: "pledge_user_type" }).then((res) => {
        this.userTypeList = res.data.data;
      });
      getDictionary({ code: "pledge_award_type" }).then((res) => {
        this.awardTypeList = res.data.data;
      });
      getDictionary({ code: "pledge_assess_content" }).then((res) => {
        this.assessContentList = res.data.data;
      });
      getDictionary({ code: "pledge_assess_type" }).then((res) => {
        this.assessTypeList = res.data.data;
      });
      getDictionary({ code: "pledge_assess_mode" }).then((res) => {
        this.assessModeList = res.data.data;
      });
      getDictionary({ code: "rpt_pay_type" }).then((res) => {
        this.payTypeList = res.data.data;
      });
      getDictionary({ code: "pledge_assess_period_type" }).then((res) => {
        this.assessPeriodTypeList = res.data.data;
      });
      getDictionary({ code: "pledge_check_content" }).then((res) => {
        this.checkContentList = res.data.data;
      });
      getDictionary({ code: "pledge_check_user_type" }).then((res) => {
        this.checkUserTypeList = res.data.data;
      });
      getDictionary({ code: "pledge_check_type" }).then((res) => {
        this.checkTypeList = res.data.data;
      });
    },
  },
};
</script>

<style>
.line-bottom {
  font-weight: bold;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 2px solid #e4e7ed;
}
.p-l-20 {
  margin-left: 20px;
}
</style>